<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单确定</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/js/base.js"></script>
    <style>
        .promotion-time-select select{
            display: block;
            width: 200px;
            text-align: center;
            font-size: 18px;
            color: #999;
            height: 30px;
            line-height: 30px;
            border: 1px solid #f1f1f1;
            /* padding:10px 0px; */
        }
        .promotion-time-select label{
            width: 150px;
            height: 35px;
            line-height: 35px;
            color:#666;
            font-size: 18px;
        }
        .promotion-address-select select:nth-child(1){
            display: block;
            width: 150px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 18px;
            color: #666;
            border: 1px solid #fdfdfd;
            border: none;
        }
        .promotion-address-select label{
            display: block;
            width: 260px;
        }
        .promotion-address-select label span{
            width: 100px;
            height: 20px;
            line-height: 20px;
            font-size: 18px;
            color: #f1f1f1;
            background-color: #999;
            display: inline-block;
        }
        .promotion-address-select label select{
            width: 150px;
            height: 25px;
            line-height: 25px;
            font-size: 18px;
            color: #666;
            background-color: #fdfdfd;
            border: 1px solid #ffcfcf;
            display: inline-block;
        }
        #province_div{
            margin-top: 10px;
        }
        #city_div{
            margin-top: 10px;
        }
        .keyword input[type=tel]{
            float: left;
            /* display: inline-block; */
            width: 298px;
            height: 38px;
            background-color: #f1f1f1;
            border: 1px solid #f2f2f2;
            text-indent: 1em;
            font-size: 16px;
            padding: 0px;
            margin: 0px;
        }
        .keyword b{
            color: red;
        }
        .keywords-info{
            display: inline-block;
            line-height: 25px;
            height: 25px;
            padding : 0px 10px;
            margin: 0px 10px;
            color: #666;
            margin: 10px 0px;
            /*background-color: #f1f1f1;*/
        }
        .keywords-info b{
            color: red;
        }
    </style>
    <script>
        var address_type = 1;
        function promotion_time_change(value){
            let div = document.getElementById('promotion_custom_time'),
                start_time = document.getElementById('promotion_start_time'),
                end_time = document.getElementById('promotion_end_time');
            if(value == 3){
                div.style = 'display:block';
                start_time.innerHTML = '';
                for (let i = 0; i < 24; i++) {
                    start_time.innerHTML += '<option value="' + i + '">' + i + '</option>';
                }
                end_time.innerHTML = '';
                for (let j = 1; j < 24; j++) {
                    end_time.innerHTML += '<option value="' + j + '">' + j + '</option>';
                }
            }else{
                div.style = 'display:none';
            }
        }
        function promotion_end_time_change(value){
            console.log(value);
            let end_time = document.getElementById('promotion_end_time');
            end_time.innerHTML = '';
            for (let i = (Math.ceil(value) + 1); i < 24; i++) {
                end_time.innerHTML += '<option value="' + i + '">' + i + '</option>';
            }
        }
        function address_change(value){
            address_type = value;
            let address = htmlcurl('/address?parent_code=0'),
                area = document.getElementById('address'),
                province_div = document.getElementById('province_div'),
                city_div = document.getElementById('city_div');
                address = JSON.parse(address);
            if (value != 1){
                province_div.style = 'display:block';
                let province = document.getElementById('province');
                province.innerHTML = '';
                address.forEach(function(value,key){
                    province.innerHTML += '<option value="' +  value.name  + '">' + value.name + '</option>';
                });
                area.value = '北京';
                if(value == 3){
                    address = htmlcurl('/address?parent_code=110000');
                    address = JSON.parse(address);
                    city_div.style = 'display:block';
                    let city = document.getElementById('city');
                    city.innerHTML = '';
                    address.forEach(function(value,key){
                        city.innerHTML += '<option value="' +  value.name  + '">' + value.name + '</option>';
                    });
                    area.value = '北京-市辖区';
                }
            }else{
                area.value = '全国';
            }
        }
        function province_change(value){
            let address = htmlcurl('/address?name=' + value),
                area = document.getElementById('address'),
                city = document.getElementById('city');
            city.innerHTML = '';
            address = JSON.parse(address);
            address.forEach(function(value,key){
                city.innerHTML += '<option value="' +  value.name  + '">' + value.name + '</option>';
            });
            if (address_type == 2)
                area.value = value;
            else
                area.value = value + '-' + address[0].name;
        }
        function city_change(value){
            let area = document.getElementById('address');
            area.value = value;
        }
        function return_prve(){
            // htmlcurl('/order/delete?order_no={$order_no}');
            history.back();
        }
    </script>
</head>
<body>
    <div class="content">
        <div class="cx-title">信息填写</div>
        <div class="cx-caption"><b>推广信息填写</b></div>
        <div>
            <form id="form" action="/order/save" method="post">
            <input type="text" style="display: none;" name="order_no" value="{$order_no}">
            <ul>
                <li>
                    <div class="left"><span>推广时间段</span></div>
                    <div class="right promotion-time-select">
                        <select name="promotion_time" onclick="promotion_time_change(this.value)">
                            <option value="1">8-20</option>
                            <option value="2">24小时全天候</option>
                            <option value="3">自定义时间段</option>
                        </select>
                        <div id="promotion_custom_time" style="display: none;">
                            <label for="promotion_start_time">
                                <span>开始时间</span>
                                <select name="start_time" id="promotion_start_time" onchange="promotion_end_time_change(this.value)"></select>
                            </label>
                            <label for="promotion_end_time">
                                <span>结束时间</span>
                                <select name="end_time" id="promotion_end_time"></select>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="left">
                        <span>推广网址</span>
                    </div>
                    <div class="right keyword">
                        <input type="text" id="website" name="website" value="" placeholder="推广网址,例如:www.baidu.com">
                        <!-- <input type="button" value="点击查价" class="kbutton" onclick="select_keyword()"> -->
                    </div>
                </li>
                <li>
                    <div class="left"><span>推广地域</span></div>
                    <div class="right promotion-address-select">
                        <select id="promotion_address" onclick="address_change(this.value)">
                            <option value="1">全国</option>
                            <option value="2">省级</option>
                            <option value="3">市级</option>
                        </select>
                        <div id="province_div" style="display: none;">
                            <label for="province">
                                <!-- <span>省级</span> -->
                                <select id="province" onclick="province_change(this.value)"></select>
                            </label>
                        </div>
                        <div id="city_div" style="display: none;">
                            <label for="city">
                                <!-- <span>市级</span> -->
                                <select id="city" onclick="city_change(this.value)"></select>
                            </label>
                            
                        </div>
                        <input type="text" id="address" name="address" style="display: none;">
                    </div> 
                </li>
                <li>
                    <div class="left">
                        <span>联系电话</span>
                    </div>
                    <div class="right keyword">
                        <input type="tel" id="mobile" name="mobile" value="" placeholder="联系电话">
                    </div>
                </li>
                <li>
                    <div class="left">
                        <span>联系人员</span>
                    </div>
                    <div class="right keyword">
                        <input type="tel" id="mobile" name="realname" value="" placeholder="联系人员">
                    </div>
                </li>
                <li>
                    <div class="left" style="display: none;">
                        <span>关键词</span>
                    </div>
                    <div class="right keywords">
                        {volist name="keywords" id="value"}
                        <span class="keywords-info">
                            {$value.keyword}<b>({$value.price})</b>
                        </span>
                        {/volist}
                    </div>
                </li>
                <!-- <li>
                    <div class="left"></div>
                    <div class="right"><button class="submit">下单</button></div>
                </li> -->
            </ul>
            </form>
        </div>
        <div class="cx-footer"></div>
        <div class="cx-bottom">
            <span>价格:<b id="change_total_price">{$order->amount}</b></span>
            <a href="javascript:return_prve();">取消</a>
            <a href="javascript:;" onclick="document.getElementById('form').submit()">确定</a>
            <!-- <a href="">取消</a> -->
        </div>
    </div>
</body>
</html>
<script>
</script>